<template>
  <div class="h-full overflow-y-scroll info">
    <a-row class="row">
      <a-col :span="12">
        <PersonInfoItem label="姓名" value="11111" :span="24" />
        <PersonInfoItem label="工号" value="11111" :span="24" />
        <PersonInfoItem label="性别" value="11111" :span="24" />
        <PersonInfoItem label="民族" value="11111" :span="24" />
        <PersonInfoItem label="籍贯" value="11111" :span="24" />
      </a-col>

      <PersonInfoItem>
        <div class="single-detail">
          <div class="personIcon"></div>
        </div>
      </PersonInfoItem>

      <PersonInfoItem label="学历" value="11111" />
      <PersonInfoItem label="学位" value="11111" />
      <PersonInfoItem label="职务" value="11111" />
      <PersonInfoItem label="岗位" value="11111" />
      <PersonInfoItem label="身份证号" value="11111" />
      <PersonInfoItem label="在岗状态" value="11111" />
      <PersonInfoItem label="出生日期" value="11111" />
      <PersonInfoItem label="婚姻状况" value="11111" />
      <PersonInfoItem label="政治面貌" value="11111" />
      <PersonInfoItem label="党团时间" value="11111" />
      <PersonInfoItem label="单位邮箱" value="11111" :span="24" />
      <PersonInfoItem label="个人邮箱" value="11111" :span="24" />
      <PersonInfoItem label="居住地址" value="11111" :span="24" />
      <PersonInfoItem label="通信地址" value="11111" :span="24" />
      <PersonInfoItem label="邮政编码" value="11111" />
      <PersonInfoItem label="入职时间" value="11111" />
      <PersonInfoItem
        label="专家领域"
        value="灭火指挥、建筑火灾、地下空间火灾、化工火灾、列车火灾、航空器火灾、船舶火灾、地铁火灾、其他灭火指挥、建筑火灾、地下空间火灾、化工火灾、列车火灾、航空器火灾、船舶火灾、地铁火灾、其他"
        :span="24"
        :block="true"
      />
      <PersonInfoItem label="人员标签" value="11111" :span="24" />
      <PersonInfoItem label="人员类别" value="11111" />
      <PersonInfoItem label="人员等级" value="11111" />
      <PersonInfoItem label="所属单位" value="11111" :span="24" />
      <PersonInfoItem label="所属部门" value="11111" />
      <PersonInfoItem label="所属辖区" value="11111" />
      <PersonInfoItem label="驻地经度" value="11111" />
      <PersonInfoItem label="驻地纬度" value="11111" />
      <PersonInfoItem label="是否执勤" value="11111" />
      <PersonInfoItem label="显示顺序" value="11111" />
    </a-row>
  </div>
</template>

<script setup>
import PersonInfoItem from './person-info-item.vue'
</script>

<style lang="scss" scoped>
.info{
  min-height: 0;
  max-height: 100%;
}
.single-detail {
  width: 100%;
  height: 196px;
  margin-top: 4px;
  float: left;
  display: flex;
  align-items: start;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  .personIcon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5vw;
    box-shadow: 0 0 7px 1px rgba(33, 152, 235, 0.3) inset;
    padding-right: 0.52083vw;
    padding: 4px 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    font-size: 0.9375vw;
  }
}
</style>
